<template>
	<view>
		<!-- 服务项目需要选择地址，次卡购买不需要 -->
		<navigator url="/pages/address/address?source=1" class="address-section">
			<view class="address-content">
				<uni-icons type="location" size="30"></uni-icons>
				<view class="cen">
					<view class="top">
						<text class="name">{{addressData.name||'姓名'}}</text>
						<text class="mobile">{{addressData.telephone||'电话号码'}}</text>
					</view>
					<text class="address"
						v-if="addressData.name">{{addressData.province}}{{addressData.city}}{{addressData.area}}{{addressData.street}}</text>
					<text class="address" v-else>请补全信息或修改地址信息</text>

				</view>
				<uni-icons type="right"></uni-icons>
			</view>
		</navigator>
		<!-- 服务项目需要上门时间，次卡购买不需要 -->
		<view class="time-section" @click="togglePopup('bottom', 'timeslot')">
			<view class="time-content">
				<uni-icons type="calendar" size="30"></uni-icons>
				<view class="cen">
					<view class="top">
						<text class="name">上门时间</text>
					</view>
					<text class="time" v-if="appointmentDateTime">{{appointmentDateTime}}</text>
					<text class="time" v-else>请选择预约时间段</text>

				</view>
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		<!-- 服务项目 -->
		<view class="goods-section">
				<view class="g-item">
					<view class="right">
						<text class="title clamp">{{product.productName}}</text>
						<text class="spec" v-if="product.skuEnabled">
							<text v-for="sku in voucher.productSkuDTO.skuAttrValueList">{{sku.skuAttrValue}}</text>
						</text>
						<text class="spec" v-if="!product.skuEnabled">-</text>
						<text class="spec" >使用次卡</text>
					</view>
				</view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>金额</text>
				<text class="price-tip">￥</text>
				<text class="price">0.00</text>
			</view>
			<view class="submit">
				<view class="button-base" @click="submit">
					立即预约
				</view>
			</view>
		</view>
		<uni-popup ref="showtimeslot" :type="type">
			<appointment-time @eventSelect="confirmTimeSlot" @eventCancel="closeTimeSlot"></appointment-time>
		</uni-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import appointmentTime from "@/components/appointment-time.vue"

	export default {
		data() {
			return {
				appointmentDateTime:'',
				appointmentStartDate:null,
				appointmentEndDate:null,
				productUuid:'',
				product: {}, 
				addressData: {}, //收货地址
				memo: '', //备注
				type: ''
			}
		},
		components: {
			uniPopup,
			appointmentTime
		},
		onLoad(option) {
			this.productUuid = option.id;
			this.inquiryProduct();
			this.inquiryDefaultAddress(this.userInfo.userUuid);
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'hasMerchant', 'merchantInfo', 'applicationConfig'])
		},
		watch: {

		},
		methods: {
			...mapMutations(['updateCartInfo']),
			confirmTimeSlot(data){
				console.log(data);
				//显示在页面
				this.appointmentDateTime = data.value;	//格式 "6月20日(今天) 16:00 - 17:00"
				//构建预约开始时间和结束时间的时间类型变量
				let appointmentDateYear = data.appointmentDate.getFullYear();
				let appointmentDateMonth = data.appointmentDate.getMonth();
				let appointmentDateDate = data.appointmentDate.getDate();
				let timeslot = data.appointmentTime;	//格式16:00 - 18:00
				let startTime = timeslot.split('-')[0].trim();
				let endTime = timeslot.split('-')[1].trim();
				let startTimeHour = startTime.substr(0,2);
				let startTimeMinute = startTime.substr(3,2);
				let endTimeHour = endTime.substr(0,2);
				let endTimeMinute = endTime.substr(3,2);
				//最终构建的时间类型
				this.appointmentStartDate = new Date(appointmentDateYear,appointmentDateMonth,appointmentDateDate,startTimeHour,startTimeMinute,0);
				this.appointmentEndDate = new Date(appointmentDateYear,appointmentDateMonth,appointmentDateDate,endTimeHour,endTimeMinute,0);
				console.log('appointment start date: '+this.appointmentStartDate);
				console.log('appointment end date: '+this.appointmentEndDate);
				this.$refs.showtimeslot.close();
			},
			closeTimeSlot(data){
				this.$refs.showtimeslot.close();
			},
			//查询默认收货地址
			inquiryDefaultAddress(userUuid) {
				let that = this;
				let postData = {
					userDTO: {
						userUuid: userUuid
					}
				}
				this.$api.request.userShip(postData, res => {
					if (res.body.status.statusCode === '0') {
						res.body.data.addresses.forEach(function(val, index) {
							if (val.default) {
								that.addressData = val;
							}
						})
					} else {
						console.log(res.body.status.errorDesc);
					}
				});
			},
			//查询订单商品
			inquiryProduct() {
				let that = this;
				let postData = {
					productUuid: this.productUuid
				}
				this.$api.request.goodsDetail(postData, res => {
					if (res.body.status.statusCode === '0') {
						this.product = res.body.data;
					} else {
						console.log(res.body.status.errorDesc);
					}
				});
			},
			togglePopup(type, open) {
				this.type = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			submit() {
				let that = this;
				//post订单数据到后台
				let postData = {
					actionType: 'ADD',
					userDTO: {
						userUuid: this.userInfo.userUuid
					},
					orderProductDTOList:[{
						'productDTO':{
							productUuid: this.productUuid
						}
					}]
				}
				// 检查地址是否填写是否选择
				if (!this.addressData.userDeliveryAddressUuid) {
					this.$api.msg('请补全地址信息');
					return;
				}
				postData.deliveryAddressDTO = {
					userDeliveryAddressUuid: this.addressData.userDeliveryAddressUuid
				}
				// 上门时间未填写
				if (!this.appointmentStartDate || !this.appointmentEndDate) {
					this.$api.msg('请选择上门时间');
					return;
				}
				postData.appointmentStartTime = this.appointmentStartDate.format('yyyy-MM-dd hh:mm');
				postData.appointmentEndTime = this.appointmentEndDate.format('yyyy-MM-dd hh:mm');
				this.$api.request.createVoucherOrder(postData, res => {
					if (res.body.status.statusCode === '0') {
							uni.redirectTo({
								url: '/pages/money/paySuccess'
							})
					} else {
						this.$api.msg(res.body.status.errorDesc);
					}
				});

			},
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 100upx;
	}

	.m-list {
		margin: 20upx 0;
	}

	.no-merchant {
		.address {
			text-align: center;
			padding: 40upx;
			color: $font-color-dark;
			font-size: $font-lg+4upx;
		}

		.desc {
			text-align: center;
			margin: 40upx;
			color: $font-color-base;
		}
	}

	.list {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		margin: 20upx 0;
		background: #fff;
		position: relative;

		.distance {
			width: 200upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-left: 20px;
			justify-content: right;
			color: $font-color-light;
			font-size: $font-base;
			text-align: right;

			.button-base-outline {
				width: 160upx;
			}
		}

		.no-merchant {
			margin-right: auto;
			font-size: $font-lg;
			color: $font-color-dark;
		}
	}

	.time-section {
		padding: 30upx 0;
		background: #fff;
		position: relative;

		.time-content {
			display: flex;
			align-items: center;
			padding: 20px;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: $font-color-dark;
			padding: 0 10px;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
		}

		.mobile {
			font-size: 34upx;
		}

		.time {
			margin-top: 16upx;
			margin-right: 20upx;
			color: $font-color-light;
		}
	}

	.address-section {
		padding: 30upx 0;
		background: #fff;
		position: relative;

		.address-content {
			display: flex;
			align-items: center;
			padding: 20px;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: $font-color-dark;
			padding: 0 10px;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
		}

		.mobile {
			font-size: 34upx;
		}

		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			color: $font-color-light;
		}
	}

	.u-box {
		font-size: 28upx;
		color: $font-color-light;
		margin-top: 16upx;

		.name {
			margin-right: 30upx;
		}
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			width: 160upx;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: $font-color-light;
		}
	}

	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;
		border-radius: 20px 20px 0 0;

		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}

		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}

		.g-item {
			display: flex;
			align-items: center;;
			padding: 20upx 30upx;

			image {
				flex-shrink: 0;
				display: block;
				width: 200upx;
				height: 200upx;
				border-radius: 4upx;
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}

			.title {
				font-size: 30upx;
				color: $font-color-dark;
				font-weight: bold;
			}

			.spec {
				font-size: 26upx;
				color: $font-color-light;
			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: $font-color-dark;
				padding-top: 10upx;

				.price {
					margin-bottom: 4upx;
					font-weight: bold;
				}

				.number {
					font-size: 26upx;
					color: $font-color-base;
					margin-left: 20upx;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}
	.footer {
		position: fixed;
		bottom: var(--window-bottom);
		display: flex;
		align-items: center;
		padding: 0 30upx;
		width: 100%;
		height: 140upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 2;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);

		.price-content {
			padding-left: 30upx;
		}

		.price-tip {
			color: $price-color;
			margin-left: 8upx;
		}

		.price {
			font-size: 36upx;
			color: $price-color;
			font-weight: bold;
		}

		.submit {
			align-items: center;
			justify-content: center;
			width: 280upx;
		}
	}	
	.timeslot{
		height: 500px;
		display: flex;
		background: #fff;
		
		.left-date{
			width: 50%;
			background-color: $page-bg-color;	
				
			.title{
				color: $font-color-dark;
				font-size: $font-lg;
				height: 40px;
				line-height:40px;
				padding-left:20px;
			}
			.date-list{
				.date-item{
					text-align: center;
					height:80px;
					line-height:80px;
				}
				.active{
					background-color: #fff;
				}
			}
			
		}
		.right-time{
			width: 50%;
			.title{
				color: $font-color-dark;
				font-size: $font-lg;
				height: 40px;
				line-height:40px;
				padding-left: 20px;
			}
			.time-list{
				.time-item{
					height:50px;
					line-height:50px;
					border: 1px solid $border-color-base;
					margin: 10px;
					text-align: center;
				}
				.active{
					border: 1px solid $border-color-focus;
				}
			}
		}
	}
	.action{
		background: #fff;
		display:flex;
		text-align: center;
		.close-btn{
			width: 50%;
			padding: 20px;
			background-color: #fff;
			color: $base-color;
		}
		.confirm-btn{
			width: 50%;
			padding: 20px;
			background-color: $base-color;
			color: #fff;
		}
	}
	.coupon-list {
		height: 400px;
		display: flex;
		flex-wrap: wrap;
		// padding: 0 30upx;
		border-radius: 20upx;
		margin-bottom: 90upx;

		.coupon-list_item {
			width: 100%;
			height: 110px;
			margin: 10upx 0;
			background-color: #fff;
			border-radius: 5px;

			.coupon-left {
				float: left;
				width: 45%;
				height: 100%;
				padding: 10upx;

				image {
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}

			.coupon-right {
				position: relative;
				padding: 10upx;
				width: 55%;
				float: left;
				border-radius: 0px 10px 10px 0px;

				.name {
					color: $font-color-dark;
					font-size: $font-lg;
				}

				.valid {
					color: $font-color-light;
					font-size: $font-base;
					line-height: 40upx;
				}

				.stock {
					color: $font-color-light;
					font-size: $font-base;
					line-height: 40upx;
					margin-top: 10upx;
				}

				image {
					position: absolute;
					top: 10upx;
					right: 10upx;
					height: 100upx;
					width: 100upx;
				}
			}
		}
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		/* position: relative; */
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}
</style>